import React from 'react'
import { Select, Radio } from 'antd'
import CustomCheckbox from '@/components/customCheckbox'
import './style.less'
const { Option } = Select

export default class Options extends React.Component {
  state = {
    dataOptions: [
      { key: 'a', name: 'a', value: 'a' },
      { key: 'b', name: 'b', value: 'b' }
    ]
  }
  componentDidMount() {
    console.log(this.props)
  }

  onChange = (e) => {
    const { value } = e.target
    this.props.setFilters({ item: value })
  }

  onChangeVal = (val) => {
    console.log(val)
    this.props.setFilters({ value: val, visible: true })
  }

  render() {
    const {
      filters: { value, item }
    } = this.props
    return (
      <div className="filterBox">
        <div className="filterItem">
          <Select allowClear value={value} onChange={this.onChangeVal}>
            <Option value="1">1</Option>
            <Option value="2">2</Option>
            <Option value="3">3</Option>
          </Select>
        </div>
        <div className="filterItem">
          <Radio.Group size="small" onChange={this.onChange} value={item}>
            <Radio.Button value="a">Hangzhou</Radio.Button>
            <Radio.Button value="b">Shanghai</Radio.Button>
            <Radio.Button value="c">Beijing</Radio.Button>
            <Radio.Button value="d">Chengdu</Radio.Button>
          </Radio.Group>
        </div>
        <div className="filterItem">
          <CustomCheckbox type="checkbox" dataSource={this.state.dataOptions} />
        </div>
      </div>
    )
  }
}
